import dash
from dash import html
import feffery_antd_components as fac
import feffery_utils_components as fuc
from dash.dependencies import Input, Output, State, ALL

app = dash.Dash(__name__)

app.layout = html.Div(
    [

        # 注入滚动动作组件
        fuc.FefferyScroll(
            id='scroll-demo',
            smooth='easeInOutQuad',
            scrollMode='target',
            duration=0,
            offset=-100
        ),

        fac.AntdRow(
            [
                fac.AntdCol(
                    html.Div(
                        html.Img(
                            src=dash.get_asset_url('logo.png'),
                            style={
                                'height': '50px'
                            }
                        ),
                        style={
                            'height': '100%',
                            'padding': '7px 20px 7px 30px'
                        }
                    )
                ),
                fac.AntdCol(
                    html.Div(
                        fac.AntdText(
                            'XXX智能计算仿真平台',
                            className='title',
                            style={
                                'fontSize': '45px'
                            }
                        ),
                        style={
                            'height': '100%',
                            'display': 'flex',
                            'alignItems': 'center'
                        }
                    )
                )
            ],
            style={
                'height': '64px',
                'boxShadow': 'rgb(240 241 242) 0px 2px 14px',
                'background': 'white',
                'marginBottom': '5px',
                'position': 'sticky',
                'top': 0,
                'zIndex': 999
            }
        ),

        fac.AntdRow(
            [
                fac.AntdCol(
                    fac.AntdAffix(
                        html.Div(
                            fac.AntdMenu(
                                menuItems=[
                                    {
                                        'component': 'Item',
                                        'props': {
                                            'key': str(i),
                                            'title': f'内容{i}'
                                        }
                                    }
                                    for i in range(10)
                                ],
                                id='side-menu',
                                defaultSelectedKey='0',
                                style={
                                    'width': '100%',
                                    'height': '100%'
                                }
                            ),
                            style={
                                'width': '300px',
                                'height': 'calc(100vh - 69px)',
                                'overflowY': 'auto',
                                'transition': 'width 0.2s'
                            }
                        ),
                        offsetTop=69.1
                    ),
                    flex='none'
                ),

                fac.AntdCol(
                    html.Div(
                        [
                            html.Div(
                                fac.AntdResult(
                                    title=fuc.FefferyInViewport(
                                        f'内容页{i}示例',
                                        id={
                                            'type': 'in-viewport-detect',
                                            'index': i
                                        }
                                    ),
                                    subTitle=f'这是一段内容页{i}示例文字说明'*100,
                                    style={
                                        'boxShadow': '0 6px 16px rgb(107 147 224 / 14%)',
                                        'borderRadius': '12px',
                                        'margin': '20px 0px'
                                    }
                                ),
                                id=f'result{i}',
                            )
                            for i in range(10)
                        ],
                        style={
                            'padding': '25px',
                        }
                    ),
                    flex='auto'
                ),

                fac.AntdBackTop(
                    duration=0.5
                )
            ],
            wrap=False,
            style={
                'overflowX': 'hidden'
            }
        )
    ]
)

app.clientside_callback(
    """
    (currentKey, inputs, states) => {

        // 取得当前触发项id
        let triggeredId = dash_clientside.callback_context.triggered[0].prop_id.split('.')[0];

        // 若本次回调由菜单项切换触发
        if (triggeredId === 'side-menu') {
            return [`result${currentKey}`, true, window.dash_clientside.no_update]
        } else if (triggeredId.startsWith('{')) {
            // 提取所有可视内容项的索引
            let alInViewportIndexes = Object.keys(states).filter(key => states[key]).map(value => parseInt(value));
            
            if (alInViewportIndexes.length > 0) {
                return [window.dash_clientside.no_update, window.dash_clientside.no_update, alInViewportIndexes[0].toString()]
            }
        }

        return window.dash_clientside.no_update;
    }
    """,
    [Output('scroll-demo', 'scrollTargetId'),
     Output('scroll-demo', 'executeScroll'),
     Output('side-menu', 'currentKey')],
    [Input('side-menu', 'currentKey'),
     Input(
        {
            'type': 'in-viewport-detect',
            'index': ALL
        },
        'inViewport'
    )],
    State(
        {
            'type': 'in-viewport-detect',
            'index': ALL
        },
        'inViewport'
    ),
    prevent_initial_call=True
)

if __name__ == '__main__':
    app.run_server(debug=True)
